<template>
  <div class="account-us">
    <div class="account-body">
      <div class="account-title">账户信息</div>
      <div class="account-content">
        <div class="account-header">
          <el-avatar :src="userInfo.full_avatar" :size="100"></el-avatar>
          <div>
            <el-upload class="upload-demo" :action="uploadurl"
               :multiple="false" :limit="1" :on-success="upSuccess" :on-error="upFail">
              <el-button size="small" style="border: none;">上传修改头像</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </div>
        </div>
        <div class="account-item">
          <div>ID</div>
          <div>{{ userInfo.id }}</div>
        </div>
        <div class="account-item">
          <div>账户身份</div>
          <div v-if="userInfo.is_teacher == 0">学员</div>
          <div v-if="userInfo.is_teacher == 1">讲师</div>
        </div>
        <div class="account-item">
          <div>手机号码</div>
          <div>{{ userInfo.phone }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import { getUserInfo,changeAvaters } from '@/api/user.js'

export default {
  name: "AccountInfo",
  data() {
    return {
      userInfo: {},
      uploadurl:'https://gzjakj.cn/api/public/images/upload',
      fileUrl:''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let that = this
      getUserInfo().then(res => {
        console.log(666, res)
        that.userInfo = res.data
      })
    },
    // 上传
    upSuccess(res){
      // console.log(888888888,res)
      this.$message({
          message: '上传成功',
          type: 'success'
      });
      this.changeAvaters(res.data)
    },
    upFail(){
      this.$message.error('上传失败');
    },
    // 修改头像
    changeAvaters(avatar){
      let that = this
      changeAvaters({avatar}).then(res=>{
        if(res.code == 200){
          that.init()
        }
      })
    }
  }
};
</script>
  
<style lang="scss">
.account-body {
  margin: 1.5% 12.5%;
  padding: 1.5%;
  height: 76vh;
  background-color: #fff;

  .account-title {
    font-size: .9vw;
    margin-bottom: 2vh;
  }

  .account-content {
    .account-header {
      display: flex;
      align-items: center;
      color: #2AC092;
      margin-bottom: 2vh;
      cursor: pointer;

      div {
        margin-left: 1vw;
      }
    }

    .account-item {
      line-height: 2;

      >div:nth-child(2) {
        color: #999999;
      }
    }
  }
}
</style>